<template>
  <div>
    <div>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
          <div style="height: 60px;color:white;display: flex;align-items: center;justify-content: center;">
            <img src="@/assets/img.png" alt="" style="width: 40px;height: 40px;">
            <span class="logo-title" v-show="!isCollapse">hello 2024</span>
          </div>

          <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none;" :default-active="$route.path">
            <el-menu-item index="0">
                <i class="el-icon-house"></i>
                <span slot="title">系统首页</span>
            </el-menu-item>

            <el-menu-item index="1">
                <i class="el-icon-eleme"></i>
                <span slot="title">还没做好</span>
            </el-menu-item>

            <el-menu-item index="2">
                <i class="el-icon-reading"></i>
                <span slot="title">不想做了</span>
            </el-menu-item>

            <!--二级菜单-->
            <el-submenu index="/">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>信息管理</span>
              </template>
              <el-menu-item index="/">用户信息</el-menu-item>
              <el-menu-item>管理员信息</el-menu-item>
            </el-submenu>
          </el-menu>

        </el-aside>

        <el-container>
          <!-- 头部区域 -->
          <el-header>
            <i :class="collapseIcon" style="font-size:30px;" @click="handleCollapse"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
            </el-breadcrumb>

            <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end">
              <i :class="FullScreen" style="font-size: 26px;padding-right: 10px;" @click="handleFull"></i>
              <el-dropdown placement="bottom">
                <div style="display: flex;align-items: center;cursor: default"> <!--cursor: default 鼠标放入正常显示，而不是编辑图标-->
                  <img src="@/assets/img.png" alt="" style="width: 40px;height: 40px;">
                  <span>管理员</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">个人信息</el-dropdown-item>
                  <el-dropdown-item command="a">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push('/login')">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-header>

          <!-- 主体区域-->
          <el-main>
            <div style="box-shadow: 0 0 10px rgba(0,0,0,.1);padding:10px 20px;border-radius: 5px; margin-bottom: 10px">
              入秋了，想睡觉，眯会儿
            </div>

            <div style="display:flex;">
            <el-card style="width: 50%;margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>国庆了，好冷啊</span>
              </div>

              <div class="block">
                <span class="demonstration"></span>
                <el-carousel height="150px" :interval="3000" type="card" arrow="always">
                  <el-carousel-item v-for="(image, index) in images" :key="index">
                    <img :src="image.src" :alt="image.alt" class="carousel-image" />
                  </el-carousel-item>
                </el-carousel>
              </div>

              <div>
                <div style="margin-top: 5px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>

              <el-card style="width: 50%;">
                <div slot="header" class="clearfix">
                  <span>今天也好冷</span>
                </div>
                <div>
                  <el-table :data="users" >
                    <el-table-column label="ID" prop="id"></el-table-column>
                    <el-table-column label="用户名" prop="username"></el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="地址" prop="address"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </div>


          </el-main>
        </el-container>

      </el-container>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse:false,
      asideWidth:'200px',
      collapseIcon:'el-icon-s-fold',
      isFullScreen: true,
      isFullScreens: false,
      FullScreen:'el-icon-quanping',
      images:[
        { src: require('@/assets/qiu.png'), alt: 'Image 1' },
        { src: require('@/assets/2.png'), alt: 'Image 2' },
        { src: require('@/assets/3.jpg'), alt: 'Image 3' },
        { src: require('@/assets/4.jpg'), alt: 'Image 4' }
      ],
      users: []
    };
  },
  mounted(){
    request.get('/user/selectAll').then(res =>{
      console.log(res.data)
      this.users = res.data
    })
  },
  methods: {
    handleFull(){
      if(this.ifFullScreen === false){
        document.exitFullscreen();
        this.ifFullScreen = !this.isFullScreens
        this.FullScreen='el-icon-quanping'
      }else {
        document.documentElement.requestFullscreen()
        this.ifFullScreen = this.isFullScreens
        this.FullScreen='el-icon-quxiaoquanping_o'
      }
    },
    handleCollapse(){
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold '
    }
  }
}
</script>

<style>
.el-menu--inline{
  background-color: #000c17 !important;
}
.el-menu--inline .el-menu-item {
   background-color: #000c17 !important;
   padding-left: 49px !important;
 }
.el-menu-item:hover, .el-submenu__title:hover{
  color:#fff !important;
}
.el-submenu__title:hover i{
  color: #fff !important;
}
.el-menu-item.is-active{
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width:calc(100% - 8px);
  margin-left:4px;
}
.el-menu-item.is-active i, el-menu-item.is-active .el-tooltip{
  margin-left: -4px;
}
.el-menu-item{
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu__title{
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu .el-menu-item{
  min-width: 0 !important;
  padding-left: 45px !important;
}
.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}
.el-aside{
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.logo-title{
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;
}
.el-header{
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}
//主体
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
